<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>监控设备</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <!-- <Card style="margin-bottom: 10px">
          <div class="normal-list -page-hd clearfix">
            <Select v-model="queryData.type"
                    style="width: 200px">
              <Option v-for="item in typeList"
                      :value="item.value"
                      :key="item.value">{{ item.label }}</Option>
            </Select>
            <Button type="primary"
                    custom-icon="iconfont icon-chaxun"
                    size="small"
                    @click="inQuire">查询</Button>
          </div>
        </Card> -->
        <div class="normal-list-page-mod">
          <div class="mb-2">
            <Button-group>
              <!--<Button custom-icon="iconfont icon-shanchusekuai"-->
                      <!--size="small"-->
                      <!--type="error"-->
                      <!--@click="batchDel">-->
                <!--删除-->
              <!--</Button>-->
              <Button custom-icon="iconfont icon-fangkuai2"
                      size="small"
                      type="primary"
                      @click="showCreateModal">
                新建
              </Button>
            </Button-group>
          </div>
          <div class="normal-list-page-bd">
            <Table border
                   :loading="list.loading"
                   :columns="list.columns"
                   :data="list.tableData"
                   @on-selection-change="selectionChange">
              <template slot-scope="{ row }"
                        slot="getImg">
                <Button size="small"
                        type="primary"
                        @click="showImg(row)">
                  查看图片
                </Button>
              </template>
               <template slot-scope="{ row }"
                        slot="status">
                 <Button v-if="row.status==1" size="small" type="success" ghost>在线</Button>
                  <Button v-if="row.status==0" size="small" type="error" ghost>不在线</Button>
              </template>
            </Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryData.totalRecord"
                  :page-size="queryData.pageSize"
                  :current="queryData.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
        </div>
      </div>
      <!--新建&修改-->
      <Modal v-model="modal.mallAdvertising.isShow"
             :loading="modal.mallAdvertising.loading"
             :mask-closable="false"
             :title="modal.mallAdvertising.title"
             @on-ok="postData"
             width="800px">
        <Form ref="systemFrom"
              :model="modal.mallAdvertising.formData"
              :rules="modal.mallAdvertising.rules"
              :label-width="120">
          <FormItem v-if="isAdd" label="设备序列号"
                    prop="deviceSerial">
            <Input placeholder="请输入设备序列号"
                   maxlength="100"
                   v-model="modal.mallAdvertising.formData.deviceSerial"
                   style="width:300px;" />
          </FormItem>
          <FormItem label="设备名称"
                    prop="deviceName">
            <Input placeholder="请输入设备名称"
                   maxlength="100"
                   v-model="modal.mallAdvertising.formData.deviceName"
                   style="width:300px;" />
          </FormItem>
          <FormItem v-if="isAdd"
                    label="设备六位验证码"
                    prop="validateCode">
            <Input placeholder="请输入设备六位验证码"
                   maxlength="6"
                   v-model="modal.mallAdvertising.formData.validateCode"
                   style="width:300px;" />
          </FormItem>

        </Form>
      </Modal>
      <Modal v-model="modal.mallAdvertising.bigPicVisible"
             width="800px">
        <img :src="modal.mallAdvertising.bigPicUrl"
             style="width: 700px; height:auto; display: block; margin: 0 auto" />
        <div slot="footer" />
      </Modal>
      <Modal v-model="showDevice"
             width="1000px">
        <div style="text-align:center">
          <iframe
                    :src="deviceUrl"
                  width="800"
                  height="600"
                  id="ysopen"
                  allowfullscreen>
          </iframe>
        </div>

      </Modal>
    </div>
  </div>
</template>
<script>
import deviceApi from '@/api/YSY/device.js'
import { Message } from 'iview'
export default {
  name: 'user',
  data () {
    return {
      modal: {
        positionList: [
          { id: 1, name: '积分商城' },
          { id: 2, name: '新闻快讯' },
          { id: 3, name: '政策制度' },
          { id: 4, name: '分类知识' },
          { id: 5, name: '最新资讯' }
        ],
        mallAdvertising: {
          isShow: false,
          bigPicVisible: false,
          loading: true,
          bigPicUrl: '',
          type: 'create', // create 新建，update 修改
          title: '新建',
          formData: {}
        }
      },
      bigPicVisible: false,
      bigPicUrl: '',
      showDevice: false,
      deviceUrl: '',
      isAdd: true,
      typeList: [
        {
          value: '',
          label: '所有类型'
        },
        {
          value: '1',
          label: '用户端'
        },
        {
          value: '2',
          label: '回收端'
        },
        {
          value: '3',
          label: ' 政府端'
        },
        {
          value: '4',
          label: '清运app'
        },
        {
          value: '5',
          label: '物业app'
        },
        {
          value: '6',
          label: '督导员APP'
        }
      ],
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 50,
          //   align: 'center'
          // },
          /** 开始自动生成 */
          //   { title: 'id', key: 'id', align: 'center', width: '100px' },
          // {
          //   type: 'selection',
          //   width: 60,
          //   align: 'center'
          // },
          {
            title: '设备序列号',
            key: 'deviceSerial',
            align: 'center',
            width: '140px'
          },
          {
            title: '设备名称',
            key: 'deviceName',
            align: 'center',
            width: '150px'
          },
          //   {
          //     title: '设备类型',
          //     key: 'deviceType',
          //     minWidth: 150,
          //     align: 'center'
          //   },
          { title: '在线状态', key: 'status', minWidth: 100, align: 'center', slot: 'status' },
          //   {
          //     title: '布撤防状态',
          //     key: 'defence',
          //     minWidth: 100,
          //     align: 'center'
          //   },
          {
            title: '设备验证码',
            key: 'validateCode',
            minWidth: 150,
            align: 'center'
          },
          { title: '增加时间', key: 'createTime', minWidth: 150, align: 'center' },
          { title: '修改时间', key: 'updateTime', minWidth: 150, align: 'center' },
          {
            title: '抓拍图片',
            key: 'imgUrl',
            align: 'center',
            minWidth: 100,
            slot: 'getImg'
            // render: (h, params) => {
            //   return h('img', {
            //     attrs: {
            //       src: params.row.imgUrl
            //     },
            //     style: {
            //       width: '100%'
            //       //   height: "35px",
            //     },
            //     on: {
            //       click: () => {
            //         this.showBigPic(params.row.imgUrl) // 此处再用一个方法，建一个modal把图放大。
            //       }
            //     }
            //   })
            // }
          },
          {
            title: '操作',
            align: 'center',
            minWidth: 150,
            fixed: 'right',
            render: (h, params) => {
              return h('div', { class: 'action-group' }, [
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'left',
                      content: '编辑'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'primary',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            // this.showUpdateModal(params.index);
                            this.showUpdateModal(params.row)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-bianjisekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),

                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'right',
                      content: '删除'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'error',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.delData([params.row.deviceSerial])
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: ' iconfont icon-shanchusekuai',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                ),
                h(
                  'Tooltip',
                  {
                    props: {
                      placement: 'right',
                      content: '实时监控'
                    },
                    style: {
                      cursor: 'pointer'
                    }
                  },
                  [
                    h(
                      'Button',
                      {
                        props: {
                          type: 'success',
                          size: 'small'
                        },
                        style: {
                          marginRight: '5px',
                          padding: '1px 2px'
                        },
                        on: {
                          click: () => {
                            this.getDevice(params.row)
                          }
                        }
                      },
                      [
                        h('Icon', {
                          props: {
                            type: 'ios-videocam',
                            size: 18
                          }
                        })
                      ]
                    )
                  ]
                )
              ])
            }
          }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0
        // name: ''
      }
    }
  },
  methods: {
    showBigPic (item) {
      this.modal.mallAdvertising.bigPicVisible = true
      this.modal.mallAdvertising.bigPicUrl = item
    },
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      deviceApi
        .getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 显示新建弹窗
    showCreateModal () {
      this.isAdd = true
      this.modal.mallAdvertising.type = 'create'
      this.modal.mallAdvertising.title = '新建'
      this.modal.mallAdvertising.formData = {}
      this.modal.mallAdvertising.isShow = true
      this.$refs.systemFrom.resetFields()
    },

    // 显示修改弹窗
    showUpdateModal (data) {
      this.isAdd = false
      this.$refs.systemFrom.resetFields()
      this.modal.mallAdvertising.type = 'update'
      this.modal.mallAdvertising.title = '修改'
      // 不请求后端，直接list取对象
      // this.modal.mallAdvertising.formData = JSON.parse(
      //   JSON.stringify(this.list.tableData)
      // )[index];
      //   const that = this
      this.modal.mallAdvertising.formData = data
      this.modal.mallAdvertising.isShow = true
    },
    postData () {
      const that = this
      that.$refs['systemFrom'].validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            // 新建
            deviceApi
              .add(that.modal.mallAdvertising.formData)
              .then((res) => {
                that.modal.mallAdvertising.loading = false
                if (!res.code) {
                  that.modal.mallAdvertising.isShow = false
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.modal.mallAdvertising.isShow = true
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          } else {
            // 修改
            // that.modal.mallAdvertising.formData.startTime = global.time(
            //   that.modal.mallAdvertising.formData.startTime
            // )
            // that.modal.mallAdvertising.formData.endTime = global.time(
            //   that.modal.mallAdvertising.formData.endTime
            // )
            deviceApi
              .update(
                //   that.modal.mallAdvertising.formData.id,
                that.modal.mallAdvertising.formData
              )
              .then((res) => {
                that.modal.mallAdvertising.loading = false
                console.log(that.modal.mallAdvertising.formData)
                if (!res.code) {
                  that.modal.mallAdvertising.isShow = false
                  that.getTableData()
                  that.$Notice.success({
                    title: '保存成功!'
                  })
                } else {
                  that.modal.mallAdvertising.isShow = true
                  that.$Notice.error({
                    title: res.message
                  })
                }
              })
              .catch((error) => {
                Message.error(error)
              })
          }
        } else {
          that.modal.mallAdvertising.loading = false
          that.$nextTick(() => {
            that.modal.mallAdvertising.loading = true
          })
        }
      })
    },
    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除序列号为 <strong>' +
          ids.toString() +
          '</strong> 的设备吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          deviceApi
            .del(ids)
            .then((res) => {
              this.$Modal.remove()
              if (!res.code) {
                this.$Notice.success({
                  title: '删除成功'
                })
                this.queryData.page = 1
                this.getTableData()
              } else {
                this.$Notice.error({
                  title: res.message
                })
              }
            })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach((element) => {
        ids.push(element.deviceSerial)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },
    // 获取抓拍图片
    showImg (data) {
      const that = this
      deviceApi
        .getDetail(data.deviceSerial)
        .then((res) => {
          console.log(res)
          const data = JSON.parse(res.data)
          that.showBigPic(data.picUrl)
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 获取监控
    getDevice (data) {
      const that = this
      //   this.showDevice = true
      that.queryData.totalRecord = undefined
      deviceApi
        .getDevice(data)
        .then((res) => {
          console.log('getDevice', res.data)
          that.deviceUrl = res.data
          this.showDevice = true
        })
        .catch((error) => {
          Message.error(error)
        })
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
